<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/Public/css/font.css">
        <link rel="stylesheet" href="/Public/css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="/Public/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/Public/js/xadmin.js"></script>
        <script type="text/javascript" src="/Public/js/ueditor.config.js"></script>
        <script type="text/javascript" src="/Public/js/ueditor.all.min.js"></script>
        <script type="text/javascript" src="/Public/js/zh-cn.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
              <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
              <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
        <style>
            .bg {
                background: #E0E0E0;
            }

            .layui-card {
                margin-bottom: 10px;
            }

            #uploadQR {
                width: 180px;
                height: 180px;
                border: 1px solid #ddd;
                position: relative;
            }

            #uploadQR::after {
                content: '';
                display: block;
                width: 0;
                height: 50%;
                position: absolute;
                left: 50%;
                top: 25%;
                border-right: 3px solid #ddd;
            }

            #uploadQR::before {
                content: '';
                display: block;
                width: 50%;
                height: 0;
                position: absolute;
                left: 25%;
                top: 50%;
                border-top: 3px solid #ddd;
            }

            #qrshow {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 9;
            }

            .block-food {
                width: 500px;
                min-height: 300px;
                position: relative;
            }

            .border {
                border: 1px solid #ddd;

            }

            .food-label {
                padding: 3px 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                float: left;
                position: relative;
                margin: 5px;
            }

            .food-del {
                position: absolute;
                right: -5px;
                top: -5px;
                display: block;
                width: 15px;
                height: 15px;
                background: #000;
                border-radius: 50%;
                cursor: pointer;
            }

            .food-del::after {
                content: '';
                display: block;
                position: absolute;
                z-index: 1;
                top: 20%;
                left: 23%;
                height: 3px;
                width: 60%;
                background: #fff;
                margin-top: 3px;
                border-radius: 3px;
                transform: rotate(45deg);
            }

            .food-del::before {
                content: '';
                display: block;
                position: absolute;
                z-index: 1;
                top: 20%;
                left: 23%;
                height: 3px;
                width: 60%;
                background: #fff;
                margin-top: 3px;
                border-radius: 3px;
                transform: rotate(-45deg);
            }

            .food-bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                text-align: center;
                padding: 10px 0;
                border-top: 1px solid #ddd;
            }
            .menuText{
                min-width: 80px;
                text-align: right;
            }
        </style>
    </head>

    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <input type='hidden' value="{$find['id']}" id='foodid'>
                    <div class="layui-card">
                        <div class="layui-card-header bg">原料管理</div>
                        <div class="layui-card-body ">
                            <div class="layui-form layui-col-space5">
                                <div class="layui-input-inline menuText">原料名称：</div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="原料名称" id="name" value="{$find['value']}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card layui-form">
                        <div class="layui-card-header ">上下架</div>
                        <div class="layui-card-body "> 
                            <input id="inuse" type="checkbox" name="switch" lay-text="启用|禁用" <if condition="$find['inuse'] eq 1">checked=""<elseif condition="$find['id'] eq ''" />checked=""</if> lay-skin="switch">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block" style="margin:20px 0;text-align: center;width: 100%;">
                            <button class="layui-btn" id="submit111" style="display:inline-block">确定</button>
                            <button class="layui-btn layui-btn-primary" style="display:inline-block">取消</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div id="labelTem" style="display:none;">
            <foreach name="disParam" item="val">
                <div class="food-label" data-id="{$val['id']}">
                    <span>{$val['value']}</span>
                </div>
            </foreach>
        </div>
        <script>

            $('#submit111').on('click', function() {
                var id = $("#foodid").val();
                var formData = new FormData();
                formData.append('name', $('#name').val());
                formData.append('inuse', $('#inuse').is(':checked') ? 1 : 2);
                if (id != '') {
                    formData.append('id', id);
                }
                $.ajax({
                    url: '/Admin/FoodProduct/addMaterial',
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    async: false,
                    success: function(msg) {
                        if (msg.code == 10000) {
                            layer.alert(msg.msg,{title:"提示"})
                            window.location.href = "/Admin/FoodProduct/material";
                        } else {
                            layer.alert(msg.msg,{title:"提示"})
                        }
                    }
                })

            })
            var id = $("#foodid").val();
            var labelArr = [];
            if (id != '') {
                $.post('/Admin/FoodProduct/getProductConfig', {id: $("#foodid").val()}, function(msg) {
                    labelArr = msg.data;
                    $.each(labelArr, function(i, e) {
                        var html = '<div class="food-label"><span> ' + e.name + '*' + e.val + 'g </span><span class="food-del" data-index="' + i + '" data-id="' + e.id + '"></span></div>'
                        $('.foodBody').append(html)
                    })
                })
            } else {
                // 默认label
                labelArr = [
//                    {name: 'dabaozi', id: 1, val: '123'},
//                    {name: 'xiaojiaozi', id: 2, val: '321'},
                ]
            }
            console.log(labelArr);


            var selectLabel = {};
            $.each(labelArr, function(i, e) {
                var html = '<div class="food-label"><span> ' + e.name + ' </span><span class="food-del" data-index="' + i + '" data-id="' + e.id + '"></span></div>'
                $('.foodBody').append(html)
            })
// 添加耗材
            $('#addFood').click(function() {
                layer.open({
                    title: '选择耗材',
                    area: '516px',
                    shadeClose: true,
                    id: 'food-panel',
                    content: $('#labelTem').html()
                });
            })
            $(document).on('click', '#food-panel .food-label', function() {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                var id = $(this).attr('data-id');
                var name = $(this).find('span').text();
                selectLabel = {
                    id: id,
                    name: name
                }
                layer.prompt({title: '重量'},function(val, index) {
                    if (val.length > 0) {
                        selectLabel.val = val;
                        var html = '<div class="food-label"><span> ' + selectLabel.name + '*' + selectLabel.val + 'g</span><span class="food-del" data-index="' + labelArr.length + 1 + '" data-id="' + selectLabel.id + '"></span></div>'
                        $('.foodBody').append(html)
                        labelArr.push(selectLabel)
                        selectLabel = {}
                        layer.closeAll();
                    }
                });

            })
// 清空耗材
            $('#delAll').click(function() {
                $('.foodBody').html('')
                labelArr = []
            })

// 删除单个耗材
            $(document).on('click', '.food-del', function() {
                var index = $(this).attr('data-index');
                labelArr.splice(index, 1)
                $(this).parents('.food-label').remove()
            })

            layui.use(['form'], function() {
                form = layui.form;
            });
            var ue = UE.getEditor('editor');
            ue.addListener("ready", function() {
                ue.setContent("{$find['content']}");
            });

            /*用户-删除*/
            function member_del(obj, id) {
                layer.confirm('确认要删除吗？', function(index) {
                    //发异步删除数据
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                });
            }

            // 分类展开收起的分类的逻辑
            // 
            $(function() {
                $("tbody.x-cate tr[fid!='0']").hide();
                // 栏目多级显示效果
                $('.x-show').click(function() {
                    if ($(this).attr('status') == 'true') {
                        $(this).html('&#xe625;');
                        $(this).attr('status', 'false');
                        cateId = $(this).parents('tr').attr('cate-id');
                        $("tbody tr[fid=" + cateId + "]").show();
                    } else {
                        cateIds = [];
                        $(this).html('&#xe623;');
                        $(this).attr('status', 'true');
                        cateId = $(this).parents('tr').attr('cate-id');
                        getCateId(cateId);
                        for (var i in cateIds) {
                            $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
                        }
                    }
                })

            })
            layui.use(['form', 'element', 'upload'], function() {
                var form = layui.form;
                var element = layui.element;
                var $ = layui.jquery;
                var upload = layui.upload;
                //单文件示例  选完文件后不自动上传
                var uploadSingle = upload.render({
                    elem: '#uploadQR'
                    , url: '/web/api/upload/upload?option=4'
                    , accept: 'images'  // 允许上传的文件类型
                    , size: 2048        // 最大允许上传的文件大小  单位 KB
                    , auto: false
                    , bindAction: '#startUploadQR'
                    , choose: function(obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result) {
                            $('#qrshow').attr('src', result); //图片链接（base64）
                        });
                    }
                    , done: function(res, index, upload) {
                        if (res.code == 0) {
                            //上传成功
                            $("#qrInput").val(res.data[0].fp_relative);
                            var startDiv = $('#startDiv');
                            startDiv.html('<span style="color: #5FB878;">上传成功</span>');
                        } else {
                            this.error(index, upload);
                        }
                    }
                    , error: function(index, upload) {
                        //演示失败状态，并实现重传
                        var startDiv = $('#startDiv');
                        startDiv.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试</a>');
                        startDiv.find('.demo-reload').on('click', function() {
                            uploadSingle.upload();
                        });
                    }
                });
            });
            layui.use(['table', 'form', 'element', 'upload'], function() {
                var table = layui.table;
                var form = layui.form;
                var element = layui.element;
                var $ = layui.jquery;
                var upload = layui.upload;
                //多文件列表示例
                var demoListView = $('#imgList');
                var totalArray = new Array();
                var uploadInst = upload.render({
                    elem: '#upload' //绑定元素
                    , url: '/web/api/upload/upload?option=3' //上传接口
                    , accept: 'images'  // 允许上传的文件类型
                            // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多个用逗号隔开),
                    , size: 5120        // 最大允许上传的文件大小  单位 KB
                    , auto: false //选择文件后不自动上传
                    , bindAction: '#startUpload' //指向一个按钮触发上传
                    , multiple: true   // 开启多文件上传
                    , number: 6    //  同时上传文件的最大个数
                    , choose: function(obj) {
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        var arr = Object.keys(files);
                        totalArray = totalArray.concat(arr);
                        // 检查上传文件的个数
                        if (totalArray.length <= 6) {
                            //读取本地文件
                            obj.preview(function(index, file, result) {
                                var tr = $(['<tr id="upload-' + index + '">'
                                            , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 66px;width:100px;"></td>'
                                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                            , '<td>等待上传</td>'
                                            , '<td>'
                                            , '<button class="layui-btn demo-reload layui-hide">重传</button>'
                                            , '<button class="layui-btn layui-btn-danger demo-delete">删除</button>'
                                            , '</td>'
                                            , '</tr>'].join(''));
                                //单个重传
                                tr.find('.demo-reload').on('click', function() {
                                    obj.upload(index, file);
                                });
                                //删除
                                tr.find('.demo-delete').on('click', function() {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });
                                demoListView.append(tr);
                            });
                        } else {
                            // 超出上传最大文件
                            layer.msg("上传文件最大不超过6个")
                        }

                    }
                    , done: function(res, index, upload) {
                        console.log("res", res);
                        if (res.code == 0) { //上传成功
                            // 上传成功后将图片路径拼接到input中，多个路径用","分割
                            var inputVal = document.getElementById("imgInput").value;
                            var valData = "";
                            if (inputVal) {
                                valData = inputVal + "," + res.data[0].fp_relative;
                            } else {
                                valData = res.data[0].fp_relative;
                            }
                            document.getElementById("imgInput").value = valData;
                            var tr = demoListView.find('tr#upload-' + index)
                                    , tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            return delete this.files[index]; //删除文件队列已经上传成功的文件

                        }
                        this.error(index, upload);
                    }
                    , error: function(index, upload) {
                        var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });
            });
            var cateIds = [];
            function getCateId(cateId) {
                $("tbody tr[fid=" + cateId + "]").each(function(index, el) {
                    id = $(el).attr('cate-id');
                    cateIds.push(id);
                    getCateId(id);
                });
            }

        </script>
    </body>

</html>